<template>

	<view class="resume" :element-loading-text="loadingTitle">
		<view :style="'height:' + statusBarHeight + 'px;'"></view>
		<u-loading-page :loading="loading" :loading-text="loadingTitle"
			style="width: 100vw;height: 100vh;z-index: 999;">
		</u-loading-page>
		<u-notify message="Hi uView" :show="show" ref="uNotify"></u-notify>
		<view class="position_t flex aic jcsb">
			<image @click="back()" src="@/static/back.png" mode=""></image>
			<p class="fonts18 fontz fontw700">我的简历</p>
			<view class="position_t_right">
				<!-- <text class="fonts14 fontz" @click="report()">预览</text> -->
			</view>
		</view>
		<view class="content_" style="background: #ffffff;">
			<view class="resume_main_header flex aic jcsb">
				<view class="flex aic">
					<image v-if="perInfo.photoUrl" :src="perInfo.photoUrl" mode="" style="border-radius: 50%;"></image>
					<image v-if="perInfo.photoUrl == 1" src="@/static/touxiang.png" mode=""></image>
					<p class="fontz fonts16 fontw700" style="margin-left: 16px;">{{ perInfo.fullName }}</p>
					<p class="fontz fonts12 gray" style="margin-left: 8px; margin-right: 10px;">
						{{ perInfo.age ? perInfo.age + '岁' : '' }} {{ perInfo.education }} {{ perInfo.startWorkTimes }}
					</p>
				</view>
				<view class="position_t_right">
					<text class="fonts14 fontz" @click="report()">预览</text>
					<!-- <image src="@/static/down.png" mode="" style="width: 17px;height: 17px;" @click="down()"></image> -->
					<!-- <image src="@/static/edit.png" mode=""
							style="width: 17px;height: 17px;z-index: 999;margin-left: 16px;" @click="edit()"> -->
				</view>

				</image>
			</view>
			<view class="resume_main">
				<p class="fontz fonts14 fontw700 resume_main_title flex jcsb aic" style="margin-top: 16px;">
					<text>基本信息（必填）</text>
				</p>
				<view class="resume_main_content flex jcsb aic" @click="edit()">
					<view class="" style="width: calc(100% - 29px);">
						<view class="flex jcsb">
							<text class="fonts14 fontz fontw500">{{ perInfo.fullName }}</text>
						</view>
					</view>
					<view class="">
						<image src="@/static/icon／arrow-right.png" mode="" style="width: 20px;height: 20px;"></image>
					</view>
				</view>
				<view class="" style="margin-top: 8px;" v-for="(item, index) in basicData" :key="index">
					<Myresume :data="item" />
				</view>
			</view>
		</view>
		<view class="position_footer flex aic jcsb" v-if="!editBool">
			<view class="" style="width: 180px;">
				<UploadFile @uploadImageClick="uploadImageClicks_" style="width: 180px;" />
			</view>
			<view class="" style="width: 120px;">
				<u-button class="blue_btn" style="" type="primary" @click="editSure()">提交</u-button>
			</view>
		</view>
		<view class="position_footer flex aic jcsb" v-if="editBool">
			<view class="" style="width: 180px;">
				<u-button class="" style="justify-self:end;" type="info" @click="react()">取消</u-button>
			</view>
			<view class="" style="width: 120px;">
				<u-button class="blue_btn" style="z-index: 9;" type="primary" @click="editSure()">提交</u-button>
			</view>
		</view>
	</view>


</template>

<script>
import UploadFile from "@/pages/components/UploadFile.vue"
import Myresume from "../../components/Myresume.vue";
import {
	getResume,
	exportResume,
	editResumes
} from "@/api/my.js";
import {
	dictFun
} from "@/util/dictionary";
export default {
	components: {
		Myresume,
		UploadFile
	},
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			show: true,
			editBool: "",
			loading: false,
			loadingTitle: "",
			perInfo: {
				photoUrl: "1",
				age: "",
				fullName: "",
				education: "",
				startWorkTimes: ""
			}, //基础信息
			data: [],
			datas: {}, //全部信息
			basicData: [{
				title: "求职期望（必填）",
				id: 0,
				add: false,
				url: "/pages/my/resume/jobHope/jobHope",
				data: {}
			},
			{
				title: "工作经历（必填）",
				add: true,
				id: 2,
				url: "/pages/my/resume/jobhistory/jobhistory",
				data: {}
			},
			{
				title: "教育经历（必填）",
				add: true,
				id: 3,
				url: "/pages/my/resume/education/education",
				data: {}
			},
			{
				title: "项目经历",
				add: true,
				id: 4,
				url: "/pages/my/resume/project/project",
				data: {}
			},
			{
				title: "培训经历",
				add: true,
				id: 5,
				url: "/pages/my/resume/train/train",
				data: {}
			},
			{
				title: "专业技能",
				add: true,
				id: 6,
				url: "/pages/my/resume/skill/skill",
				data: {}
			},
			{
				title: "资格证书",
				add: true,
				id: 7,
				url: "/pages/my/resume/certificate/certificate",
				data: {}
			},
			{
				title: "自我评价",
				add: false,
				id: 1,
				url: "/pages/my/resume/self/self",
				data: {}
			},

			{
				title: "业绩及奖惩情况",
				add: false,
				id: 10,
				url: "/pages/my/resume/performance/performance",
				data: {}
			},



			{
				title: "家庭主要成员及重要社会关系（必填）",
				add: true,
				id: 8,
				url: "/pages/my/resume/family/family",
				data: {}
			},

			{
				title: "本人承诺",
				add: false,
				id: 9,
				url: "",
				data: {}
			}
			]
		};
	},
	onLoad() {
		this.info()
	},
	onShow() {
		console.log("回来刷新呀！");
		let data = uni.getStorageSync("myResume")
		this.infos(data)
	},
	onPullDownRefresh() {
		this.info()
		this.editBool = false
		uni.stopPullDownRefresh()
	},
	methods: {
		down() {
			exportResume().then(res => {
				const {
					data,
					header
				} = res
				console.log(res);
				// const fileName = header['content-disposition'].replace(/\w+;filename=(.*)/,'$1')
				const fileName = "resume.docx"
				//此处当返回json文件时需要先对data进行JSON.stringify处理，其他类型文件不用做处理
				//const blob = new Blob([JsoN.stringify(data)], ...)
				const blob = new Blob([data], {
					type: header['content-type']
				})
				let dom = document.createElement('a')
				let url = window.URL.createObjectURL(blob)
				dom.href = url
				dom.download = decodeURI(fileName)
				dom.style.display = 'none'
				document.body.appendChild(dom)
				dom.click()
				dom.parentNode.removeChild(dom)
				window.URL.revokeObjectURL(url)
			});
		},
		info() {
			this.getResumeApi_()
		},
		infos(data) {
			console.log("数据：", data);
			this.perInfo.photoUrl = ""
			this.datas = data
			if (data.personalInformation) {
				this.perInfo = data.personalInformation
				this.perInfo.photoUrl = data.personalInformation.photoUrl ? data.personalInformation.photoUrl : ""
				this.perInfo.startWorkTimes = this.startWorkTimeFun(data.personalInformation.startWorkTime)
			}
			console.log("照片：", this.perInfo.photoUrl);
			this.perInfo.education = this.educationLevelFun(data.educationExperiences ? data.educationExperiences : [])
			for (let i = 0; i < this.basicData.length; i++) {
				this.basicData[i].data = this.datas
			}
			this.$forceUpdate()
		},
		uploadImageClicks_(value) {
			console.log(value);
			this.loadingTitle = value.type
			this.loading = value.bool
			if (!value.bool) {
				if (value.data) {
					console.log("value.data", value.data);
					this.loading = false
					this.editBool = true
					uni.setStorageSync("myResume", value.data)
					this.infos(value.data)
					this.$refs.uNotify.show({
						top: 0.1,
						type: 'success',
						color: '#ffffff',
						bgColor: '#5ac725',
						message: '解析成功',
						duration: 1000 * 2,
						fontSize: 16,
						safeAreaInsetTop: false
					})
				} else {
					this.editBool = true
					setTimeout(() => {
						this.loading = false
						this.editBool = false
					}, 100)
					this.editBool = false
					this.$refs.uNotify.show({
						top: 0.1,
						type: 'error',
						color: '#ffffff',
						bgColor: '#f56c6c',
						message: '解析失败',
						duration: 1000 * 2,
						fontSize: 16,
						safeAreaInsetTop: false
					})
				}
			}

		},
		getResumeApi_() {
			this.loadingTitle = "加载中...";
			this.loading = true
			getResume().then(res => {
				console.log(res);
				this.loading = false
				let data = res.data
				this.datas = res.data
				uni.setStorageSync("myResume", this.datas)
				this.infos(this.datas)
				// this.perInfo = data.personalInformation
				// this.photoUrl = data.personalInformation.photoUrl ? data.personalInformation.photoUrl : ""
				// this.perInfo.education = this.educationLevelFun(data.educationExperiences)
				// this.perInfo.startWorkTimes = this.startWorkTimeFun(data.personalInformation.startWorkTime)
				// for (let i = 0; i < this.basicData.length; i++) {
				// 	this.basicData[i].data = this.datas
				// }
			})
		},
		back() {
			uni.navigateBack(-1)
		},
		report() {
			console.log("预览");
			uni.navigateTo({
				url: "/pages/my/resume/look/look?datas=" + JSON.stringify(this.datas)
			})
		},
		react() {
			this.editBool = false
			this.info()
		},
		edit() {
			uni.navigateTo({
				url: "/pages/my/resume/basic/basic?data=" + JSON.stringify(this.datas)
			})
		},
		editSure() {
			console.log("总数据:", this.datas);
			if (!this.datas.personalInformation || !this.datas.personalInformation.fullName) {
				this.$refs.uNotify.show({
					top: 0.1,
					type: 'error',
					color: '#ffffff',
					bgColor: '#f56c6c',
					message: '请完善基本信息',
					duration: 1000 * 2,
					fontSize: 16,
					safeAreaInsetTop: false
				})
				return
			}
			if (!this.datas.personalInformation || !this.datas.personalInformation.lookingForwardNatureWork) {
				this.$refs.uNotify.show({
					top: 0.1,
					type: 'error',
					color: '#ffffff',
					bgColor: '#f56c6c',
					message: '请完善求职期望',
					duration: 1000 * 2,
					fontSize: 16,
					safeAreaInsetTop: false
				})
				return
			}
			if (!this.datas.educationExperiences || this.datas.educationExperiences.length < 1) {
				this.$refs.uNotify.show({
					top: 0.1,
					type: 'error',
					color: '#ffffff',
					bgColor: '#f56c6c',
					message: '教育经历不得少于1段',
					duration: 1000 * 2,
					fontSize: 16,
					safeAreaInsetTop: false
				})
				return
			}
			if (!this.datas.workExperiences || this.datas.workExperiences.length < 1) {
				this.$refs.uNotify.show({
					top: 0.1,
					type: 'error',
					color: '#ffffff',
					bgColor: '#f56c6c',
					message: '工作经历不得少于1段',
					duration: 1000 * 2,
					fontSize: 16,
					safeAreaInsetTop: false
				})
				return
			}
			if (!this.datas.familyMembers || this.datas.familyMembers.length < 1) {
				this.$refs.uNotify.show({
					top: 0.1,
					type: 'error',
					color: '#ffffff',
					bgColor: '#f56c6c',
					message: '家庭成员不得少于1位',
					duration: 1000 * 2,
					fontSize: 16,
					safeAreaInsetTop: false
				})
				return
			}
			// console.log("....");
			this.loadingTitle = "提交中...";
			this.loading = true
			editResumes(this.datas).then(res => {
				this.loading = false
				this.$refs.uNotify.show({
					top: 0.1,
					type: 'success',
					color: '#ffffff',
					bgColor: '#5ac725',
					message: '提交成功',
					duration: 1000 * 2,
					fontSize: 16,
					safeAreaInsetTop: false
				})
			}).catch(res => {
				console.log(res);
				this.loading = false
				// this.$message({
				// 	message: `${res.msg}`,
				// 	type: 'error',
				// 	offset: 0.1
				// });
			})
		},
		educationLevelFun(res) {
			if (res.length != 0) {
				console.log(res);
				let number = res[res.length - 1].educationLevel ? res[res.length - 1].educationLevel : ""
				if (number == "") {
					return ""
				} else {
					if (this.dictFuns(number, "education")) {
						return "|  " + this.dictFuns(number, "education")
					} else {
						return ""
					}

				}


			} else {
				return ""
			}
		},
		startWorkTimeFun(res) {
			if (res) {
				let number = 0
				let date = new Date()
				let year = date.getFullYear();
				number = year - res.split("-")[0]
				if (number == 0) {
					return ""
				} else {
					return "| " + number + "年工作经验"
				}

			} else {
				return ""
			}

		},
		dictFuns(value, res) {
			return dictFun(value, res)
		}
	}
}
</script>

<style lang="scss" scoped>
.resume {
	position: relative;
	height: 100vh;

	.position_t {
		background-color: #FFFFFF;
		width: calc(100% - 24px);
		position: fixed;
		height: 44px;

		image {
			width: 30px;
			height: 30px;
		}

		.position_t_right {
			text {
				// margin-right: 20px;
				color: #2F6CBC;
			}

			image {
				width: 18px;
				height: 17px;
			}
		}

	}

}

.resume_main {
	height: calc(100vh - 200px);
	overflow-y: auto;
	padding: 0px 12px 0px 12px;

	&::-webkit-scrollbar {
		display: none;
		/*隐藏滚动轴*/
	}

}

.color2 {
	color: #606266;
}

.position_content {
	padding-top: 44px;
}

.position_content_main {
	margin-top: 10px;
	padding: 13px 15px;
	background: #FFFFFF;
}

.position_footer {
	height: 40px;
	z-index: 1;
	position: absolute;
	bottom: 10px;
	background: #ffffff;
	box-shadow: 0px -1px 3px 0px rgba(48, 48, 48, 0.0592);
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
	width: calc(100% - 24px);
	padding: 12px;

	.blue_btn {
		background: #2F6CBC;
		border: 1px solid #2F6CBC;
	}
}

.resume_main_header {

	padding: 59px 0px 15px 0px;
	border-bottom: 1px solid #D8D8D8;

	image {
		width: 40px;
		height: 40px;
	}
}

.resume_main_m {
	margin-top: 24px;
}

.resume_main_title {
	position: relative;
	padding-left: 10px;

	&::after {
		position: absolute;
		left: 0;
		top: 2px;
		content: "";
		width: 4px;
		height: 16px;
		background: #2F6CBC;
		border-radius: 0px 2px 2px 0px;
		opacity: 1;
	}
}

.resume_main_content {
	margin-top: 8px;
	padding: 12px;
	background: #FFFFFF;
	border-radius: 8px 8px 8px 8px;
	opacity: 1;
	border: 1px solid #2F6CBC;
}
</style>
